<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/xhtml/1999" xml:lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
		<title>Kids Lets Play</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="main" charset="utf-8"/>
		<script src="js/prototype.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var wordImageID;
			var wordTextID;
			function addImage(element, dropon, event) {
				window.wordImageID = element.id;
				$(dropon.id).update(element.innerHTML);
				if(window.wordTextID.substr(8, window.wordTextID.length-8).match(element.id.substr(9, element.id.length-9))) {
					new Effect.Puff(wordTextID);
					new Effect.Puff(element.id);
					$('imageBox').innerHTML = "Drop Image here";
					$('wordBox').innerHTML = "Drop Text here";
					window.wordTextID = "";
					$('result').update('Picture and Word Match - ' + '<img src="images/happy.gif" />');
					setTimeout(function() { new Effect.SwitchOff('result') }, 1000);
				} else {
					window.wordImageID = element.id;
				}
			}
			function addWord(element, dropon, event) {
				window.wordTextID = element.id;
				$(dropon.id).update(element.innerHTML);
				if(window.wordImageID.substr(9, window.wordImageID.length-9).match(element.id.substr(8, element.id.length-8))) {
					new Effect.Puff(wordImageID);
					new Effect.Puff(element.id);
					$('imageBox').innerHTML = "Drop Image here";
					$('wordBox').innerHTML = "Drop Text here";					
					window.wordImageID = "";
					$('result').update('Picture and Word Match - ' + '<img src="images/happy.gif" />');
					setTimeout(function() { new Effect.SwitchOff('result') }, 2000);
				} else {
					window.wordTextID = element.id;
				}
			}
		</script>
	</head>
	<body id="body">
		<div id="container">
			<div id="title">
				<h1>Kids Lets Play</h1>
			</div>
			<!--<div id="sidebar">
				<a href="student.html"><img src="images/home.gif"/></a>
				<a href="help.html"><img src="images/help.gif"/></a>
			</div>-->
			<div id="gameScreeen">
				<div id="result">
					
				</div>
				<div id="dropBox">
					<div id="imageBoxContainer">
						<div id="imageBox">
							Drop picture here
						</div>
					</div>
					<div id="wordBoxContainer">
						<div id="wordBox">
							Drop word here
						</div>
					</div>
				</div>
				<div id="words">
					<div class="wordBlock" id="wordBlock1">
						<div class="spacer">
							&nbsp;
						</div>
						<div class="wordImage" id="wordImage1">
							<img src="images/horse.jpg" onclick="new Effect.Highlight('imageBoxContainer')" />
						</div>
						<div class="wordText" id="wordText1" onclick="new Effect.Highlight('wordBoxContainer')">
							Horse
						</div>
						<div class="spacer">
							&nbsp;
						</div>
					</div>
					<div class="wordBlock" id="wordBlock2">
						<div class="spacer">
							&nbsp;
						</div>
						<div class="wordImage" id="wordImage2">
							<img src="images/sister.jpg" onclick="new Effect.Highlight('imageBoxContainer')" />
						</div>
						<div class="wordText" id="wordText2" onclick="new Effect.Highlight('wordBoxContainer')">
							Sister
						</div>
						<div class="spacer">
							&nbsp;
						</div>
					</div>
				</div>
				<script type="text/javascript">
					var images = document.getElementsByClassName('wordImage');
					for (var i = 0; i < images.length; i++) {
						new Draggable(images[i].id, {revert:true})	
					}
					Droppables.add('imageBox', { 
					  accept: 'wordImage',
					  onDrop: addImage
					});
				</script>
				<script type="text/javascript">
					var words = document.getElementsByClassName('wordText');
					for (var j = 0; j < words.length; j++) {
						new Draggable(words[j].id, {revert:true})	
					}
					Droppables.add('wordBox', { 
					  accept: 'wordText',
					  onDrop: addWord
					});
				</script>
			</div>
		</div>
	</body>
</html>